<template>
  <div class="mine">
    <div class="top">
      <img v-if="imgUrl" :src=imgUrl>
      <img v-else src="@/assets/image.jpeg">
      <div class="right">
        <p class="nickName">{{ nickname }}</p>
        <p class="des">{{ des }}</p>
      </div>
    </div>
    <div>
      <van-cell title="打分" is-link to="/score" />
      <van-cell title="版本号" is-link value="2.0.1" />
      <van-cell class="edit" title="设置" is-link to="/edit" />
      <!-- Button 按钮组件 点击切换账号 -->
      <van-button
      class="info"
        type="info"
        block
        plain
        @click="handleInfo"
      >
        切换账号
      </van-button>
      <!-- Button 按钮组件 点击退出 -->
      <van-button
      class="danger"
        type="danger"
        block
        plain
        @click="handleDanger"
      >
        退出
      </van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'vant'
Vue.use(Dialog)
export default {
  name: 'mine',
  created () {
    // 获取当前账号的数据
    const info = this.$store.state.userInfo.filter(user => user.username === this.$store.state.username)[0]
    this.nickname = info.nickname
    this.des = info.des
    this.imgUrl = info.imgUrl
  },
  data () {
    return {
      imgUrl: '',
      nickname: '',
      des: '',
    }
  },
  methods: {
    handleInfo () {
      this.$router.push({
        name: 'login',
      })
    },
    handleDanger () {
      // 弹出询问确认退出
      Dialog.confirm({
        title: '退出',
        message: '确定要退出登录吗?',
      })
        // 点击确认时
        .then(() => {
          this.$store.commit('handleQuit', {})
          this.$router.replace({
            name: 'login',
          })
        })
        // 点击取消时
        .catch(() => {
        })
    },
  },
}
</script>

<style lang="less" scoped>
@size: 80px;
.top{
  margin: 20px 0;
}
img{
  width: @size;
  height: @size;
  border-radius: 50%;
  margin-left: 40px;
}
.right{
  display: inline-block;
  height: @size;
  margin-left: 20px;
  vertical-align: top;
  line-height: 1;
}
.nickName{
  font-size: 30px;
  margin: 0;
}
.des{
  font-size: 24px;
  margin: 0;
}
.edit{
  margin-top: 10px;
}
.info{
  margin-top: 10px;
  margin-bottom: 10px;
  border: 0;
}
.danger{
  border: 0;
}
</style>
